<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="./t.js"></script>
    <style>
        table {
            width: 1400px;
            min-height: 400px;
            border: 1px solid #ccc;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #ccc;
            height: 80px;
            width: 200px;
        }

        .bottom td {
            height: 20px
        }
    </style>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        // console.log(data)
        //解构hook
        let { useState, Fragment } = React;



        function MyApp() {
            let [data, setData] = useState(datas)
            console.log(data)
            let trEl = data._detail.map((item, index) => {
                return (
                    <Fragment key={index}>
                        <tr>
                            <td rowSpan="2">
                                {item.detail_type}
                            </td>
                            <td rowSpan='2'>{item.dept_id ? "35班" : ""}</td>
                            <td>
                                学习时间
                            </td>
                            <td>
                                {item._section[0].dtt_s} - {item._section[0].dtte}
                                总共:{item.to_days}
                            </td>
                            <td>
                                缺少数据
                            </td>
                            <td>
                                缺少数据
                            </td>
                            {index == 0 ? <td rowSpan={data._detail.length * 2}>{data._study_support.map(v=>{
                                    return (<p>{v}</p>)
                                })}</td> : null}
                            {index == 0 ? <td rowSpan={data._detail.length * 2}>{data._study_support.map(v=>{
                                    return (<p>{v}</p>)
                                })
                            }</td> : null}
                            {index == 0 ? <td rowSpan={data._detail.length * 2}>{
                                data._study_support.map(v=>{
                                    return (<p>{v}</p>)
                                })
                            }</td> : null}
                        </tr>
                        <tr className='bottom'>
                            <td>学习阶段划分</td>
                            <td>
                                阶段id:{item._section[0].study_partition_id}
                            </td>
                            <td>

                            </td>
                            <td>
                                阶段id:{item._section[0]._study_partition_id}
                            </td>
                        </tr>
                    </Fragment>
                )

            })

            return (
                <table>
                    <thead>
                        <tr>
                            <th colSpan="3">班级区分</th>
                            <th colSpan="3">时间</th>
                            <th>形式</th>
                            <th>指标</th>
                            <th>学习保障</th>
                        </tr>
                    </thead>
                    <tbody>
                        {trEl}
                        <tr>
                            <td>备注:</td>
                            <td colSpan={8}>
                                1.xxx
                                <br />
                                2.xxx
                                <br />
                            </td>
                        </tr>
                    </tbody>
                </table>
            )
        }

        const container = document.getElementById('root');
        const root = ReactDOM.createRoot(container);
        root.render(<MyApp />);

    </script>
</body>

</html>